<template>
  <div>
    <a-drawer
      :title="title"
      :maskClosable="true"
      width="500"
      placement="right"
      :closable="true"
      @close="close"
      :visible="visible"
      style="overflow: auto; padding-bottom: 53px"
    >
      <custom-table
        ref="table"
        rowKey="warningEvtid"
        :showColSettings="false"
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        :rowClassName="tableRowClass"
        :dataSource="pageData"
        :customRow="clickCustomRow"
        @change="onTableChange"
      >
      </custom-table>
    </a-drawer>
  </div>
</template>

<script>
import * as warningApi from '@/api/warning/WarningData.js'
import moment from 'moment'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  name: 'listModal',
  components: {
    CustomTable,
  },
  data() {
    return {
      title: '预警详情',
      visible: false,
      pageData: {},
      loading: false,
      columns: [
        {
          title: '预警时间',
          dataIndex: 'warningTime',
          width: 80,
          align: 'center',
          // customRender: (text) => {
          //   return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
          // },
        },
        {
          title: '劝阻状态',
          dataIndex: 'overdue',
          width: 90,
          align: 'center',
          customRender: (text, record) => {
            if (text) {
              return (
                <span>
                  <span class={'text_color_2'}> {record.dissuadeStatus}</span>
                  <span class={'text_color_3'} style={'padding-right: 0px;'}>
                    {' '}
                    {text}{' '}
                  </span>
                </span>
              )
            } else if (!text && record.dissuadeStatus) {
              return (
                <span
                  class={
                    record.dissuadeStatus == '已劝阻'
                      ? 'text_color_1'
                      : record.dissuadeStatus == '未劝阻'
                      ? 'text_color_2'
                      : 'text_color_3'
                  }
                >
                  {record.dissuadeStatus}
                </span>
              )
            } else {
              return '--'
            }
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    moment,
    handle(record) {
      this.visible = true
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        victimPhone: record.msisdn,
      }
      this.refreshTable()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      warningApi
        .warningList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    tableRowClass(record) {
      return 'warningRowClass'
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            console.log(record)
            _this.$emit('clickRow', record)
          },
        },
      }
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-descriptions-title {
  background-color: #eee;
  font-weight: normal;
  padding: 10px 10px;
}
/deep/.ant-pagination-options {
  margin-top: 10px;
}
/deep/.ant-pagination {
  li {
    margin-top: 10px;
  }
}
/deep/ .warningRowClass{
  cursor: pointer;
}
</style>
